<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日期特效</title>
    <script src="../js/tool.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 400px;
            height: 200px;
            background-color: chocolate;
            margin: 200px auto;
            border-radius: 5px;
           
        }
        #nowData{
           width: 100%;
           height: 60px;
            line-height: 60px;
            text-align: center;
            color: #fff;
            font-size: 20px;
        }
        #day{
            width: 180px;
            height: 120px;
            line-height: 120px;
            background-color: darkmagenta;
            border-radius: 5px;
            margin: 0px auto;
            font-size: 26px;
            font-weight: bold;
            text-align: center;
        }
       
    </style>
</head>
<body>
    <div id="box">
        <p id="nowData"></p>
       <p id="day">
        30
       </p>
    </div>
    <script>
        var nowData = document.getElementById("nowData");
        var day = document.getElementById("day");
        setInterval(getTime,1000);
        function getTime(){
            var data = new Date();          
            var year = data.getFullYear();
            var month = data.getMonth();
            var nowDay = data.getDate();
            var hour = data.getHours();
            var minuts = data.getMinutes();
            var seconds = data.getSeconds();
            var week = data.getDay();
            var weekDays = ['星期日','星期一','星期二','星期叁','星期四','星期五','星期六'];
            var temp = year + '年';
            month += 1;
            temp += month > 9?month+'月':'0'+month+'月';
            temp += nowDay > 9?nowDay+'日':'0'+nowDay+'日';
            temp += ' ';
            var t = hour > 12 ? hour - 12:hour;
            if(hour === 0){
                t = 12;
            }
            temp += t ;
            temp += (minuts < 10?':0'+minuts:':'+minuts);
            temp += (seconds < 10?':0'+seconds:':'+seconds);
            temp+=' ';
            if(hour >= 12){
                temp+='P.M.';
            }else{
                temp+='A.M.';
            }
            temp+=' ' + weekDays[week];
            nowData.innerHTML = temp;
        }
    </script>
</body>
</html>